<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Item Sliding - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Item Sliding - Basic</ion-title>
        <ion-buttons slot="secondary">
          <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button onclick="reload()">Reload</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content>

      <ion-refresher id="refresher">
        <ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing...">
        </ion-refresher-content>
      </ion-refresher>


      <div class="ion-padding">
        <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
        <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
        <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
        <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
        <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
        <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
      </div>

      <ion-list id="list">
        <div class="nested-div">
          <ion-item-sliding>
            <ion-item>
              <ion-label>
                <h2>No Options</h2>
                <p>Should not error or swipe without options</p>
              </ion-label>
            </ion-item>
          </ion-item-sliding>

          <ion-item-sliding id="item6">
            <ion-item>
              <ion-label>
                One Line, dynamic option and text
              </ion-label>
            </ion-item>
            <ion-item-options class="show-options">
              <ion-item-option color="primary">
                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                <span class="more-text"></span>
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item6')">
                <ion-icon slot="start" name="archive"></ion-icon>
                <span class="archive-text"></span>
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item-sliding id="item6">
            <ion-item>
              <ion-label>
                Two options, one dynamic option and text
              </ion-label>
            </ion-item>
            <ion-item-options side="start">
              <ion-item-option color="primary">
                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
              </ion-item-option>
            </ion-item-options>
            <ion-item-options side="end" class="show-options">
              <ion-item-option color="primary">
                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                <span class="more-text"></span>
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item6')">
                <ion-icon slot="start" name="archive"></ion-icon>
                <span class="archive-text"></span>
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item-sliding id="item100">
            <ion-item href="#">
              <ion-label>
                <h2>HubStruck Notifications</h2>
                <p>A new message from a repo in your network</p>
                <p>Oceanic Next has joined your network</p>
              </ion-label>
              <ion-note slot="end">
                10:45 AM
              </ion-note>
            </ion-item>

            <ion-item-options side="start">
              <ion-item-option onclick="noclose('item100')">
                No close
              </ion-item-option>
            </ion-item-options>
            <ion-item-options side="end">
              <ion-item-option color="danger" onclick="unread('item100')">
                <ion-icon slot="icon-only" name="trash"></ion-icon>
              </ion-item-option>
              <ion-item-option onclick="unread('item100')">
                <ion-icon slot="icon-only" name="star"></ion-icon>
              </ion-item-option>
            </ion-item-options>

          </ion-item-sliding>

          <ion-item-sliding id="item100">
            <ion-item href="#">
              <ion-label>
                <h2>Disabled Buttons</h2>
                <p>Buttons should not be clickable</p>
              </ion-label>
            </ion-item>

            <ion-item-options side="start">
              <ion-item-option disabled>
                Disabled
              </ion-item-option>
            </ion-item-options>
            <ion-item-options side="end">
              <ion-item-option color="danger" disabled>
                <ion-icon slot="icon-only" name="trash"></ion-icon>
              </ion-item-option>
              <ion-item-option disabled>
                <ion-icon slot="icon-only" name="star"></ion-icon>
              </ion-item-option>
            </ion-item-options>

          </ion-item-sliding>

          <ion-item-sliding id="item0">
            <ion-item onclick="clickedItem('item0')">
              <ion-label class="ion-text-wrap">
                <h2>RIGHT side - no icons</h2>
                <p>Hey do you want to go to the game tonight?</p>
              </ion-label>
            </ion-item>
            <ion-item-options class="sliding-enabled">
              <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
              <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item-sliding id="item1">
            <ion-item detail href="#" class="ion-activated">
              <ion-label class="ion-text-wrap">
                <h2>LEFT side - no icons</h2>
                <p>I think I figured out how to get more Mountain Dew</p>
              </ion-label>
            </ion-item>
            <ion-item-options side="start" class="sliding-enabled">
              <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
              <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
            </ion-item-options>
          </ion-item-sliding>


          <ion-item-sliding id="item2">
            <ion-item detail>
              <ion-label class="ion-text-wrap">
                <h2>RIGHT/LEFT side - icons</h2>
                <p>I think I figured out how to get more Mountain Dew</p>
              </ion-label>
            </ion-item>
            <ion-item-options side="start" class="sliding-enabled">
              <ion-item-option color="secondary" expandable onclick="unread('item2')">
                <ion-icon slot="start" name="checkmark"></ion-icon>
                Unread
              </ion-item-option>
            </ion-item-options>

            <ion-item-options side="end" class="sliding-enabled">
              <ion-item-option color="primary" onclick="archive('item2')">
                <ion-icon slot="start" name="mail"></ion-icon>
                Archive
              </ion-item-option>
              <ion-item-option color="danger" onclick="del('item2')" expandable>
                <ion-icon slot="start" name="trash"></ion-icon>
                Delete
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item-sliding id="item3">
            <ion-item detail>
              <ion-label class="ion-text-wrap">
                <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                <p>I think I figured out how to get more Mountain Dew</p>
              </ion-label>
            </ion-item>
            <ion-item-options side="start" icon-start class="sliding-enabled">
              <ion-item-option color="secondary" expandable onclick="unread('item3')">
                <ion-icon slot="start" name="checkmark"></ion-icon>
                Unread
              </ion-item-option>
            </ion-item-options>

            <ion-item-options icon-start>
              <ion-item-option color="primary" onclick="archive('item3')">
                <ion-icon slot="start" name="mail"></ion-icon>
                Archive
              </ion-item-option>
              <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
                <ion-icon slot="start" name="trash"></ion-icon>
                Delete
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>


          <ion-item-sliding id="item4">
            <ion-item>
              <ion-icon name="mail" slot="start"></ion-icon>
              <ion-label>
                One Line w/ Icon, div only text
              </ion-label>
            </ion-item>
            <ion-item-options icon-start>
              <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
                <ion-icon slot="start" name="archive"></ion-icon>
                Archive
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>


          <ion-item-sliding id="item5" class="sliding-enabled">
            <ion-item>
              <ion-avatar slot="start">
                <img src="">
              </ion-avatar>
              <ion-label>
                One Line w/ Avatar, div only text
              </ion-label>
            </ion-item>
            <ion-item-options>
              <ion-item-option color="primary" expandable>
                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                More
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item5')">
                <ion-icon slot="start" name="archive"></ion-icon>
                Archive
              </ion-item-option>
              <ion-item-option color="light" onclick="del('item5')">
                <ion-icon slot="start" name="trash"></ion-icon>
                Delete
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>


          <ion-item-sliding id="item7">
            <ion-item>
              <ion-label>
                One Line, dynamic icon-start option
              </ion-label>
            </ion-item>
            <ion-item-options icon-start>
              <ion-item-option color="primary">
                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                <span class="more-text"></span>
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item7')">
                <ion-icon slot="start" name="archive"></ion-icon>
                <span class="archive-text"></span>
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item-sliding id="item8">
            <ion-item>
              <ion-thumbnail slot="start">
                <img src="">
              </ion-thumbnail>
              <ion-label>
                <h2>DOWNLOAD</h2>
                <p>Paragraph text.</p>
              </ion-label>
            </ion-item>
            <ion-item-options>
              <ion-item-option color="primary" onclick="archive('item8')">
                <ion-icon name="archive"></ion-icon>Archive
              </ion-item-option>
              <ion-item-option color="secondary" expandable onclick="download('item8')">
                <ion-icon slot="start" name="download" class="download-hide"></ion-icon>
                <div class="download-hide">Download</div>

                <ion-icon slot="start" class="download-spinner" name="refresh"></ion-icon>
                <div class="download-spinner">Loading...</div>
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item-sliding id="item9">
            <ion-item>
              <ion-thumbnail slot="start">
                <img src="">
              </ion-thumbnail>
              <ion-label>
                <h2>ion-item-sliding without options (no sliding)</h2>
                <p>Paragraph text.</p>
              </ion-label>
            </ion-item>
          </ion-item-sliding>

          <ion-item-sliding id="item10">
            <ion-item detail>
              <ion-label class="ion-text-wrap">
                <h2>RIGHT/LEFT side - many buttons</h2>
                <p>Use mobile emulator to check</p>
              </ion-label>
            </ion-item>
            <ion-item-options side="start" class="sliding-enabled">
              <ion-item-option color="primary" expandable>
                <ion-icon slot="start" name="checkmark"></ion-icon>
                Btn 1
              </ion-item-option>
              <ion-item-option color="secondary" expandable>
                <ion-icon slot="start" name="checkmark"></ion-icon>
                Btn 2
              </ion-item-option>
              <ion-item-option color="danger" expandable>
                <ion-icon slot="start" name="checkmark"></ion-icon>
                Btn 3
              </ion-item-option>
              <ion-item-option color="tertiary" expandable>
                <ion-icon slot="start" name="checkmark"></ion-icon>
                Btn 4
              </ion-item-option>
            </ion-item-options>

            <ion-item-options side="end" class="sliding-enabled">
              <ion-item-option color="primary" expandable>
                <ion-icon slot="start" name="mail"></ion-icon>
                Btn 5
              </ion-item-option>
              <ion-item-option color="secondary" expandable>
                <ion-icon slot="start" name="mail"></ion-icon>
                Btn 6
              </ion-item-option>
              <ion-item-option color="danger" expandable>
                <ion-icon slot="start" name="mail"></ion-icon>
                Btn 7
              </ion-item-option>
              <ion-item-option color="tertiary" expandable>
                <ion-icon slot="start" name="mail"></ion-icon>
                Btn 8
              </ion-item-option>
            </ion-item-options>
          </ion-item-sliding>

          <ion-item>
            <ion-label class="ion-text-wrap">
              <h2>Normal ion-item (no sliding)</h2>
              <p>Paragraph text.</p>
            </ion-label>
          </ion-item>

          <ion-item onclick="clickedItem('item9')">
            <ion-label class="ion-text-wrap">
              <h2>Normal button (no sliding)</h2>
              <p>Hey do you want to go to the game tonight?</p>
            </ion-label>
          </ion-item>
        </div>

      </ion-list>

      <script>
        var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');

        // Toggle the dynamic options
        var dynamicShowOptions = document.getElementsByClassName('show-options');
        toggleDynamicOptions();

        function toggleDynamicOptions() {
          // TODO the element needs to be removed / added to the DOM
        }

        // Change the text for the more and archive buttons
        var dynamicText = true;
        var moreTextSpans = document.getElementsByClassName('more-text');
        var archiveTextSpans = document.getElementsByClassName('archive-text');
        changeDynamicText();

        function changeDynamicText() {
          dynamicText = !dynamicText;

          for (var i = 0; i < moreTextSpans.length; i++) {
            var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
            moreTextSpans[i].innerHTML = moreText;
          }

          for (var i = 0; i < archiveTextSpans.length; i++) {
            var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
            archiveTextSpans[i].innerHTML = archiveText;
          }
        }

        function toggleSliding() {
          // this.slidingEnabled = !this.slidingEnabled;
        }

        function closeOpened() {
          var list = document.getElementById('list');
          list.closeSlidingItems();
        }

        function openItem(side) {
          var item = document.getElementById('item2');
          item.open(side);
        }

        function openItemOneSide() {
          var item = document.getElementById('item1');
          item.open();
        }

        function noclose(item) {
          var itemEle = document.getElementById(item);
          console.log('no close', itemEle);
        }

        function unread(item) {
          closeSlidingItem('UNREAD', item);
        }

        function archive(item) {
          closeSlidingItem('ARCHIVE', item);
        }

        function del(item) {
          closeSlidingItem('DELETE', item);
        }

        function download(item) {
          var itemEle = document.getElementById(item);
          console.log(itemEle);
          itemEle.classList.add('downloading');
          setTimeout(() => {
            alert('Item was downloaded!');

            itemEle.classList.remove('downloading');
            itemEle.close();
          }, 1500);
        }

        function closeSlidingItem(option, item) {
          var itemEle = document.getElementById(item);

          // TODO open alert instead
          if (itemEle) {
            itemEle.close();
          }
          console.log(option, itemEle);
        }

        function clickedItem(item) {
          var itemEle = document.getElementById(item);
          console.log('Clicked, ion-item', itemEle);
        }

        function reload() {
          window.location.reload();
        }
        document.addEventListener('ionSwipe', (ev) => console.log('SWIPE!!', ev.detail));
        document.addEventListener('ionDrag', (ev) => {
          // console.log('DRAG!!', ev.detail);

          let slidingRatio = ev.target.getSlidingRatio();
          console.log('sliding', slidingRatio);

          if (slidingRatio > 0) {
            // positive
            console.log('right side');
          } else {
            // negative
            console.log('left side');
          }
          if (Math.abs(slidingRatio) > 1) {
            console.log('overscroll');
          }
        });


      </script>
      <style>
        .download-spinner {
          display: none;
        }

        svg circle {
          stroke: white;
        }

        .downloading .download-spinner {
          display: block;
        }

        .downloading .download-hide {
          display: none;
        }

      </style>
    </ion-content>

  </ion-app>
</body>

</html>
